<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" size="lg" title="租户选择器" scrollable no-close-on-backdrop> 
        <div class="card card-custom gutter-b example example-compact" id="tableAccountTenantBody">               
            <!--分页组件-->
            <el-table style="width: 100%"
                stripe border @selection-change="handleSelectionChange" highlight-current-row :data="tenantDataList" >
            <!-- 复选框 -->
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="序号" width="80">
                <template slot-scope="scope">
                {{scope.$index+1}} 
                </template>
            </el-table-column>
            <el-table-column align="left" prop="name" label="租户"></el-table-column>       
            <el-table-column align="left" prop="code" label="编码"></el-table-column>       
            <el-table-column align="left" prop="sysName" label="隶属系统"></el-table-column>       
            </el-table>
            <div class="block">
                <el-pagination
                    hide-on-single-page   
                    @size-change="handleSizeChange"        
                    @current-change="handleCurrentChange"  
                    :current-page="pageNo"                
                    :page-sizes="[5, 10, 30, 50]"          
                    :page-size="pageSize"			  
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">		
                </el-pagination>
            </div>
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
            <button type="button" class="btn btn-light-danger font-weight-bold mr-2" block @click="hideModal">
                <i class="icon-xl fa fa-times"></i>取消
            </button> 
            <button type="button" class="btn btn-light-success font-weight-bold mr-2" @click="addOauthAccountTenant">
                <i class="icon-xl fas fa-save"></i> 保存
            </button>
        </template>
     </b-modal>
</template>  
<script>
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        searchForm:{},
        accountTypeId:'',
        tenantDataList:[],
        account:"",
        oauthAccountTenantForm:{
            oauthAccountTenants: [
          
            ],
            account:"",
        },        
        sels: [], //当前选框选中的值
        pageNo:1,      // 默认当前是第一页
        pageSize:5,    // 当前每页的数据是5条
        totalCount:0   // 总数默认为0
      }
    },
    components: {
    },
    mounted() {

    },
    methods:{
      showModal(accountTypeId,account) {     
        this.accountTypeId = accountTypeId; 
        this.account = account;
        this.$refs['my-modal'].show();
        this.initList();   // 按当前的页号和每页的数据量进行查询
      },
      hideModal() {
        this.$refs['my-modal'].hide()
      },
      toggleModal() {
        // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
        this.$refs['my-modal'].toggle('#toggle-btn')
      },
      initList(){
        showWating({renderBody:"tableAccountTenantBody"});
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        this.searchForm.accountTypeId = this.accountTypeId;
        this.searchForm.account = this.account;
        params.searchJson = JSON.stringify(this.searchForm);//为form元素     
        apiUtil.queryPage(process.env.VUE_APP_OAUTH_API+"/oauthTenant/tenantList", params).then(({ data }) => {
          this.tenantDataList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },      
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
        // console.log("----",sels);
        // if(null != sels && sels.length > 0){
        //     for(var i in sels){
        //         let tag = {};
        //         tag.name = sels[i].name;
        //         tag.type = '';
        //         tag.tenantId = sels[i].id;
        //         tag.sysModeId = sels[i].sysModeId;
        //         this.tags.push(tag);
        //     }
        // }
      }, 
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      search(){
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll(){
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },    
      addOauthAccountTenant(){
            if(this.sels.length > 1){
                handleAlert("最多只能选择一条数据", "warning", 3)
                return;
            }
            let thiz = this;
            // 保存前提示
            this.$confirm("确定保存?", "提示", {type: "warning",}).then(() => {
                thiz.oauthAccountTenantForm.account = thiz.account;
                let oauthAccountTenants = [];
                if(null != thiz.sels && thiz.sels.length > 0){
                    for(var i in thiz.sels){
                        let oauthAccountTenant = {};
                        oauthAccountTenant.name = thiz.sels[i].name;
                        oauthAccountTenant.type = '';
                        oauthAccountTenant.tenantId = thiz.sels[i].id;
                        oauthAccountTenant.sysModeId = thiz.sels[i].sysModeId;
                        oauthAccountTenant.code = thiz.sels[i].code;
                        oauthAccountTenant.accountTypeId = thiz.sels[i].accountTypeId;
                        oauthAccountTenants.push(oauthAccountTenant);
                    }
                }
                thiz.oauthAccountTenantForm.oauthAccountTenants = oauthAccountTenants;
                apiUtil.post(process.env.VUE_APP_OAUTH_API+"/oauthAccountTenant/add", thiz.oauthAccountTenantForm).then(({ data }) => {
                    if(data.success){
                        handleAlert("设置成功", "success", 3);
                        this.hideModal();//关闭窗体
                        this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式，目标刷新主列表使用
                    }else {
                        handleAlert("设置失败", "error", 3);
                    }            
                });
            }).catch(()=>{});//注意这里，这里是重点！！！;   
      },
    }
  };
</script>
<style scoped>
.card.card-custom {
  box-shadow: 0px 0px 30px 0px #fff !important;
}
</style> 